<!--
 * @Author: new-wang
 * @Date: 2025-04-10 10:47:35
 * @LastEditors: new-wang
 * @LastEditTime: 2025-05-30 18:03:24
 * @FilePath: \v3bbs\src\components\home\HomePage.vue
 * @Description:
-->
<template>
  <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
    <a-layout id="components-layout-basic">
      <HomeHeader class="header"></HomeHeader>
      <a-layout-content>
        <!-- 加载占位 -->
        <!-- <CustomEmpty v-if="spinning" /> -->

        <main class="content">
          <a-row>
            <a-col :span="collapsed ? 24 : 18" :style="collapsed ? '' : 'padding-right:20px'">
              <!-- 轮播图 -->
              <carousel-show></carousel-show>
            </a-col>
            <a-col v-if="!collapsed" :span="6"> 6 </a-col>
          </a-row>
          <a-row class="article-container">
            <a-col :span="collapsed ? 24 : 18" :style="collapsed ? '' : 'padding-right:20px'">
              <div class="article-session">
                <div class="article_session_title">精选文章</div>
                <!-- 查看更多按钮设置主题颜色的一种方案 -->
                <!-- :style="{
                    color: themeColor,
                    padding: 0,
                    height: 'auto',
                  }" -->
                <a-button type="link">
                  查看更多
                  <DoubleRightOutlined />
                </a-button>
              </div>
              <div class="article_list">
                <div class="article_item" v-for="item in 10" :key="item">{{ item }}</div>
              </div>
            </a-col>
            <a-col v-if="!collapsed" :span="6"> 6 </a-col>
          </a-row>
        </main>
      </a-layout-content>
      <a-layout-footer class="footer">Footer</a-layout-footer>
    </a-layout>
  </a-space>
</template>

<script setup lang="ts">
import { DoubleRightOutlined } from '@ant-design/icons-vue'
import HomeHeader from '@/components/home/head/HomeHeader.vue'
// import CustomEmpty from '@/components/utils/CustomEmpty.vue';
import CarouselShow from '@/components/carousel/CarouselShow.vue'

import { useConfigStore } from '@/stores/config'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
const { collapsed, themeColor } = storeToRefs(useConfigStore())

// 加载中
const spinning = ref(false)
</script>

<style lang="less">
#components-layout-basic .header {
  position: fixed;
  z-index: 999;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #00000021;
}

#components-layout-basic .content {
  margin-top: 64px;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;

  .article-container {
    margin-top: 40px;

    .article-session {
      display: flex;
      justify-content: space-between;

      //  查看更多按钮设置主题颜色的一种方案
      // 使用更具体的类选择器
      .ant-btn.ant-btn-link {
        color: v-bind(themeColor);
        padding: 0;

        &:hover {
          color: v-bind(themeColor);
          opacity: 0.8;
        }

        // 设置图标的左边距
        // .anticon {
        //   margin-left: 4px;
        // }
      }
    }
  }
}

#components-layout-basic .ant-layout-header,
.ant-layout-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#components-layout-basic .ant-layout-header {
  background: #fff;
  height: auto;
  line-height: 2.3;
}
</style>
